import { Text, StyleSheet, Pressable, useAnimatedValue, Animated } from 'react-native'
import React from 'react'
import UIConstants from '../constants/UIConstants'
import Color from 'color' // 颜色处理教程https://juejin.cn/post/6921630889814261767，源码https://www.npmjs.com/package/color
export default function ZhButton({ onPress, bgColor = UIConstants.COLOR_GREEN, title, }) {

    let pressColor = Color(bgColor).darken(0.2).hex() // 按压时颜色变暗
    let num = useAnimatedValue(0)
    let bgc = num.interpolate({
        inputRange: [0, 1],
        outputRange: [bgColor, pressColor]
    })

    return (
        <Pressable onPress={onPress}
            onPressIn={() => {
                Animated.timing(num, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true
                }).start()
            }}
            onPressOut={() => {
                Animated.timing(num, {
                    toValue: 0,
                    duration: 300,
                    useNativeDriver: true
                }).start()
            }}
        >
            <Animated.View style={[ss.btn, { backgroundColor: bgc }]}>
                <Text style={ss.text}>{title}</Text>
            </Animated.View>
        </Pressable >
    )
}

let ss = StyleSheet.create({
    btn: {
        borderRadius: UIConstants.BORDER_RADIUS_MD,
        paddingVertical: UIConstants.SPACE_COL_MD,
    },
    text: {
        color: UIConstants.COLOR_WHITE,
        textAlign: 'center',
    }
})